<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  @@include('./head.html')
  <script src="../lib/template-web.js"></script>
  <link rel="stylesheet" href="../css/index.css">
  <title>商城首页</title>
</head>

<body>
  <header>
    <!-- 头部导航 -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="javascript:;"><img src="../static/img/logo.png" alt="" class="logo"></a>
        </div>

        <!--导航头部 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" id="search-text" placeholder="请输入商品的名称、特性来搜索...">
            </div>
            <button type="button" class="btn btn-default" id="search-btn"><span
                class="glyphicon glyphicon-search"></span></button>
            <ul class="list-group" id="list-box">
              <li class="list-group-item">这里是搜索时的提示</li>
            </ul>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="javascript:;" class="login-btn">登录 </a></li>
            <li><a href="javascript:;" role="button" class="myfavor">我的收藏 </a></li>
            <li><a href="javascript:;" class="my-cart">我的购物车 </a></li>
            <li><a href="javascript:;" class="exit-btn">退出登录 </a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </header>

  <section class="section container">
    <ul class="nav nav-tabs ml-16" role="tablist">
      <li role="presentation" class="active" data-toggle="tab">
        <a href="javascript:;" class="btn btn-default dropdown-toggle" data-toggle="dropdown">价格<span
            class="caret"></span></a>
        <ul class="dropdown-menu">
          <li data-sort="priceUp"><a href="javascript:;">升序</a></li>
          <li data-sort="priceDown"><a href="javascript:;">降序</a></li>
        </ul>
      </li>
      <li role="presentation" class="active" data-toggle="tab">
        <a href="javascript:;" class="btn btn-default dropdown-toggle" data-toggle="dropdown">新品<span
            class="caret"></span></a>
        <ul class="dropdown-menu">
          <li data-sort="addedUp"><a href="javascript:;">升序</a></li>
          <li data-sort="addedDown"><a href="javascript:;">降序</a></li>
        </ul>
      </li>
      <li role="presentation" class="active" data-toggle="tab">
        <a href="javascript:;" class="btn btn-default dropdown-toggle" data-toggle="dropdown">库存<span
            class="caret"></span></a>
        <ul class="dropdown-menu">
          <li data-sort="storesAsc"><a href="javascript:;">升序</a></li>
          <li data-sort="storesDesc"><a href="javascript:;">降序</a></li>
        </ul>
      </li>
      <!-- <li role="presentation"><a href="javascript:;" aria-controls="settings" role="tab" data-toggle="tab">秒杀</a>
      </li> -->
    </ul>
    <div class="container content">

    </div>
  </section>
</body>

</html>
<script type="text/html" id="tpl">
  <li class="list-group-item cursor" id="list-group-item">{{key}}</li>
</script>
<script src="../js/index.js"></script>